<!-- 数据可视化中心-数据准备-数据源基本信息管理 -->
<template>
  <el-container class="custom__container" @dragover="onDragOver" @drop="onDrop">
    <el-aside width="260px">
      <div class="custom__aside">
        <hsa-title-box title="数据表"></hsa-title-box>
        <div class="mt-20">
          <div class="mb-10">选择数据源</div>
          <div class="mb-20">
            <el-select size="large" v-model="queryForm.dataSource" style="width: 100%">
              <el-option
                v-for="item in state.dataGather"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="mb-10">生成SQL表</div>
          <div class="mb-20 txt-center">
            <el-button type="primary" @click="addSqlTable">生成</el-button>
          </div>
          <div class="mb-10">本地上传excel表</div>
          <div class="txt-center">
            <el-button type="primary" @click="addExcelTable">上传</el-button>
          </div>
        </div>
        <div class="custom__aside-header">
          <el-divider class="custom__aside-divider" />
        </div>
        <!-- 列表 -->
        <section class="custom__aside-content">
          <div class="mb-20">
            <el-input style="width: 100%" v-model="queryForm.searchVal" class="input-with-select">
              <template #append>
                <el-button :icon="Search" />
              </template>
            </el-input>
          </div>
          <el-tree
            v-bind="treeDragOption"
            @node-drag-over="nodeDragOver"
            @node-drag-start="nodeDragStart"
          />
        </section>
      </div>
    </el-aside>

    <el-main class="custom__main">
      <hsa-adaptive-container>
        <!-- 查询 -->
        <hsa-adaptive-pane>
          <hsa-title-pane>
            <hsa-title-pane-item>
              <div class="al-center">
                <div class="drap-box" data-key="leftVal">{{ tabData.leftVal.label || '拖动数据表到此处' }}</div>
                <div class="ml-10 mr-10">
                  <el-select size="large" style="width: 100px" v-model="queryForm.associationVal">
                    <el-option
                      v-for="item in state.associationTypes"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
                <div class="drap-box" data-key="rightVal">{{ tabData.rightVal.label || '拖动数据表到此处' }}</div>
              </div>
            </hsa-title-pane-item>
          </hsa-title-pane>
        </hsa-adaptive-pane>
        <hsa-adaptive-pane>
          <hsa-title-pane>
            <hsa-title-pane-item>
              <div class="jut-end mb-10">
                <el-button type="primary" @click="addCount">新建计算字段</el-button>
                <el-button type="primary" @click="addDimension">新建分组维度</el-button>
                <el-button type="primary" @click="filterHander">过滤</el-button>
                <el-button type="primary" @click="showView">预览</el-button>
              </div>
            </hsa-title-pane-item>
          </hsa-title-pane>
        </hsa-adaptive-pane>

        <!-- 数据源管理 -->
        <hsa-adaptive-pane auto-height fill>
          <div class="main-box">
            <el-aside width="260px">
              <div class="aside-box">
                <hsa-title-box title="维度"></hsa-title-box>
                <div class="mt-10 mb-20">
                  <el-tree
                    v-bind="treeOption"
                    node-key="id"
                    style="max-width: 600px"
                  />
                </div>
                <hsa-title-box title="度量"></hsa-title-box>
                <div class="mt-10 mb-20">
                  <el-tree
                    v-bind="treeOption"
                    node-key="id"
                    style="max-width: 600px"
                  />
                </div>
              </div>
            </el-aside>
            <div class="table-box">
              <hsa-title-box title="数据预览"></hsa-title-box>
              <div class="mt-10">
                <hsa-table v-bind="tableOption" auto-height></hsa-table>
              </div>
            </div>
          </div>
        </hsa-adaptive-pane>
      </hsa-adaptive-container>
    </el-main>
  </el-container>

  <!-- 弹出框 -->
  <generate-sql ref="mySqlTabel" @historicalHandle="historicalHandle" />
  <historical-script ref="myHistorical" @sqlHandle="sqlHandle" />
  <generate-excel ref="myExcelTabel" />
  <count-field ref="myCount" />
  <grouping-dimension ref="myDimension" />
  <filter-box ref="myFilter" />
</template>

<script setup lang="ts">
import generateSql from "./popup/generate-sql.vue";
import historicalScript from "./popup/historical-script.vue";
import generateExcel from "./popup/generate-excel.vue";
import countField from "./popup/count-field.vue";
import groupingDimension from "./popup/grouping-dimension.vue";
import filterBox from "./popup/filter-box.vue";
import { ref, onMounted, reactive, getCurrentInstance } from "vue";
import useCurrentInstance from "@/common/utils/useCurrentInstance";
import { Search } from "@element-plus/icons-vue";
// API
import { ApiDataPreparation, dataPreparationList } from "~api/DataPreparation";

// 类型
import type { HsaTableColumn } from "hsa-ui";
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

interface Refs {
  mySqlTabel: InstanceType<typeof generateSql>;
  myHistorical: InstanceType<typeof historicalScript>;
  myExcelTabel: InstanceType<typeof generateExcel>;
  myCount: InstanceType<typeof countField>;
  myDimension: InstanceType<typeof groupingDimension>;
  myFilter: InstanceType<typeof filterBox>;
}
// 当前实例
const { proxy } = useCurrentInstance<Refs>(getCurrentInstance);

const addSqlTable = () => {
  proxy.$refs.mySqlTabel.open();
};
const historicalHandle = (obj) => {
  proxy.$refs.myHistorical.open(obj);
};
const sqlHandle = (data) => {
  proxy.$refs.mySqlTabel.open(data);
};
const addExcelTable = () => {
  proxy.$refs.myExcelTabel.open();
};
const addCount = () => {
  proxy.$refs.myCount.open();
};
const addDimension = () => {
  proxy.$refs.myDimension.open();
};
const filterHander = () => {
  proxy.$refs.myFilter.open();
};
const showView = () => {
  router.push('/data-construction/construction-preview')
};
interface Tree {
  label: string;
  children?: Tree[];
}
const customDragImage = ref(null);
const moveData = ref();
const tabData = ref({
  leftVal:{
    label: undefined
  },
  rightVal:{
    label: undefined
  },
});
const queryForm = ref({
  dataSource: '',
  searchVal: '',
  associationVal: '',
});
const state = reactive({

  dataGather: [
    //数据集
    {
      value: "1",
      label: "xxx数据源",
    },
    {
      value: "2",
      label: "数据源",
    },
  ],
  associationTypes: [
    //数据集
    {
      value: "1",
      label: "左关联",
    },
    {
      value: "2",
      label: "右关联",
    },
    {
      value: "3",
      label: "内关联",
    },
  ],
});

onMounted(() => {
  console.log(route.query,'route.query');
  setDom();
});

const setDom = () => {
  //生成一个div，用户替换拖拽框
  const div = document.createElement("div");
  div.style.width = "200px";
  div.style.height = "40px";
  div.style.borderRadius = "6px";
  div.style.border = "2px solid #dbe6ff";
  div.style.backgroundColor = "#585c71";
  div.style.textAlign = "center";
  div.style.position = "absolute";
  div.style.top = "-9999px";
  document.body.appendChild(div);
  customDragImage.value = div;
};
const onDragOver = (event) => {
  event.preventDefault();
};

const onDrop = (event) => {
  event.preventDefault();
  const keyVal  = event.target.dataset.key;
  if(keyVal && keyVal != ''){
    tabData.value[keyVal] = moveData.value;
  }
};


const treeDragOption = reactive({
  data: ref<Tree[]>([
    {
      label: "表XXX1",
    },
    {
      label: "表XXX2",
    },
    {
      label: "表XXX3",
    },
    {
      label: "表XXX4",
    },
    {
      label: "表XXX5",
    },
    {
      label: "表XXX6",
    },
    {
      label: "表XXX7",
    },
    {
      label: "表XXX8",
    },
  ]),
  defaultProps: {
    children: "children",
    label: "label",
  },
  draggable: true,
  allowDrop: () => {
    return false;
  },
  allowDrag: (node) => {
    return node.isLeaf;
  },
});
const nodeDragStart = (node, event) => {
  if (customDragImage.value) {
    //储存被拖拽的数据
    moveData.value = node.data;
    //修改拖拽框样式
    customDragImage.value.innerHTML = `
    <div style="color: white; padding:0 10px; font-size: 16px;line-height:50px;cursor: move;">
        <div>${node.data.label}</div>
    </div>`;
    //setDragImage方法的三个参数，第一个是替换的dom，第二三个参数是拖动时鼠标在替换dom中的位置
    event.dataTransfer.setDragImage(customDragImage.value, 125, 25);
  }
};
const nodeDragOver = (draggingNode, dropNode, event) => {
  event.dataTransfer.dropEffect = "move";
};
// 目录配置
const treeOption = reactive({
  data: ref<Tree[]>([
    {
      label: "第一组",
      children: [
        {
          label: "第三组",
        },
        {
          label: "第四组",
        },
        {
          label: "第五组",
        },
      ],
    },
  ]),
  defaultProps: {
    children: "children",
    label: "label",
  },
  "node-click": (data: Tree) => {
    console.log(data);
  },
});

// 表格配置
const tableOption = reactive({
  data: ref<any[]>([
    {
      date: "2016-05-02",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "端口",
    },
    {
      date: "2016-05-04",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "端口",
    },
    {
      date: "2016-05-01",
      name: "王小虎",
      state: "驱动类型",
      city: "192.168.168.222",
      zip: "端口",
    },
    {
      date: "2016-05-03",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "65535",
    },
  ]),
  paginationEnable: false,
  columns: ref<HsaTableColumn[]>([
    { align: "center", label: "数据集名称", prop: "date" },
    { align: "center", label: "关联", prop: "name" },
    { align: "center", label: "字段配置", prop: "state" },
    { align: "center", label: "数据探索", prop: "city" },
  ]),
});
</script>

<style lang="scss" scoped>
.ml-10 {
  margin-left: 10px;
}
.mr-10 {
  margin-right: 10px;
}
.mt-10 {
  margin-top: 10px;
}
.mt-20 {
  margin-top: 20px;
}
.mt-30 {
  margin-top: 30px;
}
.mb-10 {
  margin-bottom: 10px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-30 {
  margin-bottom: 30px;
}
.txt-center {
  text-align: center;
}
.flex {
  display: flex;
}
.jut-btn {
  display: flex;
  justify-content: space-between;
}
.jut-end {
  display: flex;
  justify-content: flex-end;
}
.al-center {
  display: flex;
  align-items: center;
}
.flex {
  display: flex;
}
// 容器
.custom__container {
  height: 100%;
  width: 100%;
  position: relative;
}

// 左侧
.custom__aside {
  background: #fff;
  height: 100%;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;

  // 头部
  .custom__aside-header {
    // padding: 10px;
    padding-bottom: 0px;
  }

  // 分割线
  .custom__aside-divider {
    margin-bottom: 5px;
  }

  // 内容
  .custom__aside-content {
    box-sizing: border-box;
    // padding: 10px;
    padding-top: 5px;
    height: calc(100% - 94px);
    overflow-y: auto;
  }
}

// 主要内容
.custom__main {
  padding: 0;
  padding-left: 10px;
  .drap-box{
    width: 150px;
    height: 40px;
    border: 1px solid #ccc;
    text-align: center;
    border-radius: 4px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;


  }
  .main-box {
    display: flex;
    height: 100%;
    .aside-box,
    .table-box {
      background: #fff;
      height: 100%;
      width: 100%;
      padding: 10px 10px 16px;
      box-sizing: border-box;
    }
    .table-box {
      margin-left: 10px;
    }
  }
}
.sel-tips {
  width: 100%;
  position: relative;
  .tip-text {
    position: absolute;
    top: 0;
    right: -120px;
  }
}
</style>
